<template>
  <div class="app-container">
    <div class="titleRow">模板消息</div>
    <div class="messTopBox">
      <div class="titleRow">使用说明</div>
      <div class="subMess">消息通知仅用于向用户发送重要的服务通知，只能用于符合其要求的服务场景中，如果拼团成功，商品发货通知等，商品发货通知等。不支持广告等营销类消息以及其他所有可能对用户造成骚扰的消息。</div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      header-cell-class-name="headerRow"
    >
      <el-table-column
        prop="template_name"
        label="信息类别"
        width="250"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="gzh"
        label="微信公众号"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <div class="cellBox">
            <div class="itemBox green">
              <div class="editBox">编辑配置</div>
              <div class="messBox">已发送 {{ scope.row.get_config[0].total }} 次</div>
            </div>
            <div class="switchBox">
              <el-switch
                v-model="scope.row.get_config[0].swicth"
                active-color="#5f34c7"
                inactive-color="#e2e2e2"
              />
              <span class="text">应用</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="xcx"
        label="微信小程序"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <div class="cellBox">
            <div class="itemBox violet">
              <div class="editBox">编辑配置</div>
              <div class="messBox">已发送 {{ scope.row.get_config[1].total }} 次</div>
            </div>
            <div class="switchBox">
              <el-switch
                v-model="scope.row.get_config[1].swicth"
                active-color="#5f34c7"
                inactive-color="#e2e2e2"
              />
              <span class="text">应用</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="message"
        label="短信通知"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <div class="cellBox">
            <div class="itemBox purple">
              <div class="editBox">编辑配置</div>
              <div class="messBox">已发送 {{ scope.row.get_config[2].total }} 次</div>
            </div>
            <div class="switchBox">
              <el-switch
                v-model="scope.row.get_config[2].swicth"
                active-color="#5f34c7"
                inactive-color="#e2e2e2"
              />
              <span class="text">应用</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="mail"
        label="邮件通知"
        header-align="center"
        align="center"
        s
      >
        <template slot-scope="scope">
          <div class="cellBox">
            <div class="itemBox blue">
              <div class="editBox">编辑配置</div>
              <div class="messBox">已发送 {{ scope.row.get_config[3].total }} 次</div>
            </div>
            <div class="switchBox">
              <el-switch
                v-model="scope.row.get_config[3].swicth"
                active-color="#5f34c7"
                inactive-color="#e2e2e2"
              />
              <span class="text">应用</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getTemplateInfo } from '@/api/templateInfos'
export default {
    data() {
        return {
            tableData: []
        }
    },
    async created() {
        var result = await getTemplateInfo({})
        var list = result.data.list
        var length = list.length
        for (let i = 0; i < length; i++) {
            var Jitem = list[i].get_config
            for (let j = 0; j < Jitem.length; j++) {
                Jitem[j].swicth = (Jitem[j].status == 'true')
            }
        }
        this.tableData = list
        console.log('模板消息：', this.tableData)
    }
}
</script>

<style lang='scss'>
.headerRow {
    background: #f8f8f8 !important;
    color: #4a4a4a;
}

.titleRow {
    font-size: 17px;
    font-weight: bolder;
    color: #666666;
}

.messTopBox {
    color: #858488;
    width: 100%;
    background-color: #ede8f9;
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
    min-height: 100px;

    .subMess {
        margin-top: 10px;
    }
}

.cellBox {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .text {
        margin-left: 10px;
    }
}

.itemBox {
    color: #ffffff;
    display: flex;
    border-radius: 4px;
    overflow: hidden;

    .editBox {
        padding: 4px 8px;
        flex: 0 0 auto;
    }

    .messBox {
       padding: 4px 20px;
       flex: 0 0 auto;
    }
}

.green {
    .editBox {
        background-color: #5cb85a;
    }

    .messBox {
        background-color: #ecf9f0;
        color: #6ebf6d;
    }
}

.violet {
    .editBox {
        background-color: #646beb;
    }

    .messBox {
        background-color: #e9eafc;
        color: #747bed;
    }
}

.purple {
    .editBox {
        background-color: #5f34c7;
    }

    .messBox {
        background-color: #e8e1f7;
        color: #7551cf;
    }
}

.blue {
    .editBox {
        background-color: #4a80f3;
    }

    .messBox {
        background-color: #dde9fd;
        color: #6895f5;
    }
}

</style>
